<template>
    <section class="main-body">
        <Bing class="main-search" />
        <section class="main-container">
            <el-card class="box-card" shadow="never" v-for="c in navData" :key="c.id + 'c'">
                <template #header>
                    <div class="card-header">
                        <span>{{ c.name }}</span>
                    </div>
                </template>
                <div class="nav-class">
                    <NavItem v-for="item in c.Navigation" :key="item.id + 'i'" :data="item" />
                </div>
            </el-card>
        </section>
    </section>
</template>

<script setup lang="ts">
import Bing from '@/components/index/bing.vue'
import NavItem from '@/components/index/navitem.vue'
import { ref, onMounted } from 'vue'
import { setVisit } from '@/apis/base'
import { getNavigationData } from '@/apis/navigation'

async function getNav() {
    const res = await getNavigationData()
    navData.value = res.data
}

onMounted(async () => {
    await setVisit('/')
    await getNav()
})

const navData = ref<AssortModel[]>()
</script>

<style lang="scss" scoped>
.main-body {
    width: 100vw;
    //min-width: 768px;
    padding: 20px 3vw;

    .main-search {
        margin-bottom: 20px;
    }

    .main-container {
        display: flex;
        flex-direction: column;
        gap: 16px;

        :deep(.el-card__header) {
            padding: 6px 25px;
            font-size: 14px;
            letter-spacing: 3px;
            font-weight: 500;
        }

        .box-card {

            .nav-class {
                display: grid;
                gap: 15px 12px;
                grid-template-columns: repeat(4, 1fr);

                @media screen and (min-width: 769px) {
                    grid-template-columns: repeat(5, 1fr);
                }

                @media screen and (min-width: 992px) {
                    grid-template-columns: repeat(6, 1fr);
                }

                @media screen and (min-width: 1200px) {
                    grid-template-columns: repeat(7, 1fr);
                }

                @media screen and (min-width: 1920px) {
                    grid-template-columns: repeat(8, 1fr);
                }
            }
        }

    }
}
</style>